<template>
  <div class="login_content">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="img">
        <!-- <img :src="imgsrc" alt="" /> -->
        <el-avatar
          shape="circle"
          :size="100"
          fit="fill"
          :src="imgsrc"
        ></el-avatar>
      </div>
      <!-- 表单区域 -->
      <el-form
        label-width="0px"
        class="form"
        :model="LoginForm"
        :rules="Loginrule"
        ref="loginFormRef"
        status-icon
      >
        <el-form-item prop="id">
          <el-input
            prefix-icon="iconfont icon-dashujukeshihuaico-
"
            v-model="LoginForm.id"
            placeholder="请输入学号"
            @blur="validate"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="iconfont icon-mima1"
            v-model="LoginForm.password"
            type="password"
            placeholder="请输入密码（密码为身份证后六位）"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login"
            ><i
              class="iconfont icon-shangxian"
              style="font-size:10px;margin-right:0px;"
            ></i>
            登录</el-button
          >
          <el-button type="default" @click="reset">
            <i
              class="iconfont icon-zhongzhi"
              style="font-size:10px;margin-right:0px;"
            ></i
            >重置</el-button
          >
        </el-form-item>
        <el-form-item style="text-align:center;color:gray;font-size:12px">
          <!-- Copyright © 2021.三个臭皮匠有限公司 -->
        </el-form-item>
        <el-form-item style="text-align:center;color:gray;">
          <label style="font-size:10px"> © 2021.三个臭皮匠有限公司</label>
        </el-form-item>
      </el-form>
    </div>
    <!-- 注册用户弹出框 -->
    <el-dialog title="注册用户" :visible.sync="adduservisible" width="40%">
      <!-- 内容主题区域 -->
      <!-- <el-form
        :model="addForm"
        :rules="addFormrules"
        ref="addFormRef"
        width="500px"
        label-width="100px"
      >
        <el-form-item label="学号" prop="id">
          <el-input v-model="addForm.id"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
      </el-form> -->
      <!-- 结束内容主题区 -->
      <!-- 底部区域 -->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="adduservisible = false">取 消</el-button>
        <el-button type="primary" @click="adduser">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      imgsrc: "http://localhost:8090/default.jfif",
      LoginForm: {
        id: "",
        password: "",
      },
      Loginrule: {
        id: [
          {
            required: true,
            message: "请输入学号",
            trigger: "blur",
          },
          {
            min: 12,
            max: 12,
            message: "学号长度应为12个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "密码长度应为6-15个字符",
            trigger: "blur",
          },
        ],
      },
      addForm: {
        id: "",
        password: "",
      },
      addFormrules: {
        id: [
          {
            required: true,
            message: "请输入学号",
            trigger: "blur",
          },
          {
            min: 12,
            max: 12,
            message: "学号长度应为12个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "密码长度应为6-15个字符",
            trigger: "blur",
          },
        ],
      },
      adduservisible: false,
    };
  },
  methods: {
    login() {
      const md5 = this.$crypto.createHash("md5");
      md5.update(this.LoginForm.password);
      let md5pass = md5.digest("hex");
      console.log(md5pass);
      let data = {
        id: this.LoginForm.id,
        password: md5pass,
      };
      this.$refs.loginFormRef.validate(async (vaild) => {
        if (!vaild) {
          return this.$message.error("登录失败");
        }
        if (vaild) {
          const { data: res } = await this.$http({
            url: "students/login",
            data: qs.stringify(data),
            method: "post",
          });
          if (res.code == 0) {
            // window.sessionStorage.setItem("token", res.token);
            this.$message({
              message: res.tokenname + " 欢迎回来！",
              type: "success",
            }),
              //储存token口令 保证页面权限
              // console.log(res);
              window.sessionStorage.setItem("tokenid", res.tokenid);
            window.sessionStorage.setItem("tokenname", res.tokenname);
            window.sessionStorage.setItem("tokenimg", res.img);
            this.$router.push("index");
          } else if (res.code == 1) {
            this.$message.error("登录失败");
          } else {
            this.$message.error("该用户已被设为禁用状态");
          }
        }
      });
    },
    // 重置表单
    reset() {
      this.$refs.loginFormRef.resetFields();
    },
    validate() {
      this.$http
        .post("students/validate", { id: this.LoginForm.id })
        .then((res) => {
          this.imgsrc = res.data;
        });
    },
  },
};
</script>
<style scoped>
.login_content {
  height: 100%;
  background: url("../assets/image/demo.jpg") no-repeat;
  width: 100%;
  background-color: #eee;
  background-size: 100%;
  position: absolute;
}
.el-form-item__content {
  color: blue;
}
.el-form-item {
  font-size: 8px !important;
}
.el-input__inner {
  border-color: black;
}
.el-input__inner {
  /* border: 1px solid black !important; */
  background-color: rgba(1, 1, 1, 0.3) !important;
}
.login_box {
  width: 500px;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.4);
  margin: 150px auto;
  position: relative;
  border-radius: 10px;
}
.img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  margin: 0 auto;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  /* margin-left: -50px; */
  background-color: #fff;
  border: 1px solid rgb(158, 157, 157);
}
.img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin-top: 5px;
}
.form {
  width: 70%;
  text-align: right;
  position: absolute;
  left: 15%;
  /* margin-left: 50%; */
  bottom: 0px;
}
.btns {
  text-align: right;
}
img {
  width: 50px;
  height: 50px;
}
</style>
